<template>
  <footer id="colophon" class="site-footer">
    <div class="site-info">
      <div class="footertext">
        <div class="img-preload"
          ><img
            src="https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/wordpress-rotating-ball-o.svg" />
          <img
            src="https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/disqus-preloader.svg"
        /></div>
        <p
          class="foo-logo"
          :style="`background-image: url('${footerSite.iconSrc}');`"
        ></p>
        <p
          ><span
            >Crafted with <i class="fa fa-heart animated"></i> by
            <router-link :to="{ name: 'Home' }">{{
              footerSite.author
            }}</router-link></span
          >
        </p>
        <p
          >{{ footerSite.copyright }}
          <a href="http://www.beian.miit.gov.cn" target="_blank">
            {{ footerSite.recordCode }}</a
          >
        </p></div
      >
      <!-- 设备信息-->
      <p id="footer-sponsor">
        <a
          v-for="(item, index) in footerSite?.device || []"
          :key="index"
          :href="item.url"
          target="_blank"
          alt="CDN Sponsor"
        >
          <img :src="item.iconUrl" alt="CDN Sponsor" /></a
        >&nbsp;&nbsp;&nbsp;
      </p>
    </div>
    <div class="run-time">{{ runTime }}</div>
    <div class="login-count">{{ loginCount }}</div>
    <div class="login-count">{{ statisticLoginCount }}</div>
  </footer>
</template>

<script setup>
  import { onMounted, ref, onUnmounted } from 'vue'

  import { footerSite } from '@/settings'
  import { getLoginCount } from '@/api/article/article'
  const runTime = ref('')
  const loginCount = ref('')
  const statisticLoginCount = ref('')
  // 用户不传使用默认当前时间
  let nowDate = new Date()
  const calculateTime = setInterval(() => {
    let X = new Date(footerSite.createTime || nowDate)
    let Y = new Date()
    let T = Y.getTime() - X.getTime()
    let M = 24 * 60 * 60 * 1000
    let a = T / M
    let A = Math.floor(a)
    let b = (a - A) * 24
    let B = Math.floor(b)
    let c = (b - B) * 60
    let C = Math.floor((b - B) * 60)
    let D = Math.floor((c - C) * 60)
    runTime.value =
      '网站平稳运行共: ' + A + '天' + B + '小时' + C + '分' + D + '秒'
  }, 1000)
  function getCount() {
    console.log('123')
    getLoginCount().then((res) => {
      loginCount.value = '网站平稳运行共接待：' + res.data.all + '  位用户'
      statisticLoginCount.value =
        ' 今天 ' +
        res.data.nowDay +
        ' 位，昨天 ' +
        res.data.yesterday +
        ' 位，上周 ' +
        res.data.lastWeek +
        ' 位，上月 ' +
        res.data.lastMonth +
        ' 位 '
    })
  }

  onUnmounted(() => {
    clearInterval(calculateTime)
  })

  onMounted(() => {
    getCount()
  })
</script>

<style lang="less" scoped>
  .site-footer {
    font-family: 'Ubuntu', sans-serif;
    #footer-sponsor {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .footertext {
      span {
        color: #666666;

        i {
          color: #e74c3c;
        }

        a {
          color: var(--font-color);
          text-decoration: none;
        }
      }
    }
  }

  .run-time {
    text-align: center;
    color: #b9b9b9;
    font-size: 10px;
  }
  .login-count {
    text-align: center;
    color: #b9b9b9;
    font-size: 10px;
  }

  a img {
    margin-left: 1em;
    height: 1.5em;
  }

  @media screen and (max-width: 860px) {
    .run-time {
      margin-top: 25px;
    }
    .login-count {
      margin-top: 25px;
    }
  }
</style>
